<template>
	<view class="cart_good_main">
		<view class="good">
			<view class="left">
				<image src="../../../static/img/cart/unchoosed.svg" alt="" class="choosed" v-show="!goodIsActive"
					@click="chooseGood({ shopId, goodId })" />

				<image src="../../../static/img/cart/choosed.svg" alt="" class="choosed" v-show="goodIsActive"
					@click="noChooseGood({ shopId, goodId })" />
			</view>

			<view class="right">
				<view class="good-state">
					<view @click="checkGood">
						<image class="image" :src="goodInfo.cover" :alt="this.title" />
					</view>
					<view class="good-info">
						<span>{{ showTitle }}</span>
						<view class="check">
							<view class="price">
								<span class="flotBit">¥</span><span class="intBit"> {{ intBit }}</span><span
									class="flotBit">{{ flotBit }}</span>
							</view>
							<view class="counter">
								<span class="btn" @click="goodLess({ shopId, goodId })" :class="ifCheck">-</span>
								<view class="count">{{ goodCount({ shopId, goodId }) }}</view>
								<span class="btn" @click="goodMore({ shopId, goodId })">+</span>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<view class="good-operation" v-show="!isEditing">
			<view v-if="isLogin">
				<span v-show="goodIfCollected(goodId)" @click="Uncollect">取消收藏</span>
				<span v-show="!goodIfCollected(goodId)" @click="Collect">加入收藏</span><span>|</span>
			</view>
			<span @click="del">删除</span>
		</view>
	</view>
</template>

<script>
	import {
		mapGetters,
		mapMutations,
		mapState
	} from "vuex";

	export default {
		name: "CartGood",
		props: {
			goodInfo: {
				type: Object,
				default () {
					return {};
				},
			},
			shop: {
				type: Object,
				default () {
					return {};
				},
			},
			shopId: {
				type: String,
				default () {
					return "";
				},
			},
		},
		data() {
			return {
				title: this.goodInfo.title,
				goodId: this.goodInfo.goodId,
				isEditing: false,
			};
		},

		computed: {
			//格式化标题
			showTitle() {
				return this.title.length < 30 ?
					this.title :
					this.title.slice(0, 30) + "...";
			},
			//价格整数位
			intBit() {
				return this.goodInfo.price.slice(0, this.goodInfo.price.indexOf("."));
			},

			//价格小数位
			flotBit() {
				return this.goodInfo.price.slice(this.goodInfo.price.indexOf("."));
			},

			//是否可结算
			ifCheck() {
				return this.goodInfo.count > 1 ? "" : "forbid";
			},

			//getters映射
			...mapGetters(["ifGoodActive", "goodIfCollected", "goodCount"]),
			...mapState(["isLogin"]),

			goodIsActive() {
				return this.ifGoodActive({
					goodId: this.goodId,
					shopId: this.shopId
				});
			},
		},
		methods: {
			//收藏操作
			foucsOn() {},

			//mutations映射
			...mapMutations([
				"goodDelete", //删除商品
				"goodLess", //商品数量减一
				"goodMore", // 商品数量加一
				"chooseGood", //选择商品
				"noChooseGood", //取消选择商品
				"goodCollected", //收藏商品
				"goodUnCollect", //取消收藏商品
			]),

			checkGood() {
				// this.$router.push({ path: "/detail", query: { id: this.goodId } });
				uni.navigateTo({
					url: `/pages/detail/Detail?id=${this.goodId}`
				})
			},
			del() {

				uni.showModal({
					title: "提示",
					content: `确认删除?`,
					showCancel: true,
					confirmText: "确定",
					success: async (res) => {
						if (res.confirm) {
							this.goodDelete({
								shopId: this.shopId,
								goodId: this.goodId
							});
							this.success('删除成功');
						} else {
							this.info('已取消');
						}
					},
				})

			},
			Collect() {
				let info = {
					good: this.goodInfo,
					goodId: this.goodId,
					shop: this.shop,
					shopId: this.shopId,
				};
				this.goodCollected(info);
				this.info('收藏成功');
			},

			Uncollect() {
				this.goodUnCollect(this.goodId);
				this.info('取消收藏');
			},
		},
	};
</script>
<style lang="scss" scoped>
	.cart_good_main {
		width: calc(100vw - 20rpx);
		height: 300rpx;
		display: grid;
	}

	.left {
		display: grid;
		align-items: center;
		height: 200rpx;
	}

	.right {
		display: grid;
		justify-content: center;
		align-items: center;
		height: 200rpx;

		padding: 0 20rpx;
	}

	.good {
		display: flex;
		height: 200rpx;
	}

	.good-state {
		display: flex;
		justify-content: space-between;
		/* #ifdef H5 */
		gap: 20rpx;
		/* #endif */
	}

	.good-info {
		width: calc(100% - 240rpx);
		display: grid;
		justify-content: flex-start;
		font-size: 0.9rem;
	}

	.good-state .image {
		width: 200rpx;
		height: 200rpx;
		border-radius: 10rpx;
	}

	.check {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.price {
		color: red;
	}

	.intBit {
		font-size: 1.1rem;
	}

	.flotBit {
		font-size: 0.8rem;
	}

	.choosed {
		height: 42rpx;
		width: 40rpx;
	}

	.count {
		height: 32rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100rpx;
		background-color: rgb(211, 211, 211);
		font-size: 0.9rem;
	}

	.counter {
		display: flex;
		justify-content: space-between;
		width: 160rpx;
		font-weight: bolder;
		align-items: center;
	}

	.btn {
		font-size: 1rem;
	}

	.good-operation {
		font-size: 0.9rem;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		/* #ifdef H5 */
		gap: 10rpx;
		/* #endif */
		height: 30;
		margin-right: 40rpx;
	}

	.forbid {
		color: grey;
		pointer-events: none;
	}
</style>
